<template>
  <view class="router-view bcl-active pt-15">
    <view class="user-form bcl-white mb-15">
      <view
        class="box box-between box-column-center pl-15 pr-15 border border-bottom"
      >
        <view class="bold">银行名称</view>
        <view class="uni-input">
          <input
            type="text"
            placeholder="输入开户行名称"
            v-model="bank.bankname"
          />
        </view>
      </view>

      <view
        class="box box-between box-column-center pl-15 pr-15 border border-bottom"
      >
        <view class="bold">开户名称</view>
        <view class="uni-input">
          <input
            type="text"
            placeholder="输入您的开户名称"
            v-model="bank.depositName"
          />
        </view>
      </view>

      <!-- <view class="box box-between box-column-center pl-15 pr-15 border border-bottom">
				<view class="bold">开户行地区</view>
				<view class="uni-input">
					<picker mode="region" @change="bindRegionChange" :value="bank.region" custom-item="全部">
					    <view class="picker">
					      {{bank.region[0]}}，{{bank.region[1]}}，{{bank.region[2]}}
					    </view>
					  </picker>
				</view>
			</view> -->

      <view
        class="box box-between box-column-center pl-15 pr-15 border border-bottom"
      >
        <view class="bold">银行卡号</view>
        <view class="uni-input">
          <input
            type="number"
            placeholder="输入您的银行卡号"
            v-model="bank.bankAccount"
          />
        </view>
      </view>

      <view
        class="box box-between box-column-center pl-15 pr-15 border border-bottom"
      >
        <view class="bold">确认银行卡号</view>
        <view class="uni-input">
          <input
            type="number"
            placeholder="确认您的银行卡号"
            v-model="bank.confirmBankAccount"
          />
        </view>
      </view>
    </view>

    <!-- 绑定 -->
    <view class="container">
      <button
        class="uni-button uni-button-lg uni-button-full mt-50"
        @tap="bind"
      >
        立即绑定
      </button>
    </view>
  </view>
</template>

<script>
import { bankAuth } from "@/apis/user";

export default {
  data() {
    return {
      bank: {
        bankname: "",
        depositName: "",
        bankAccount: "",
        confirmBankAccount: "",
        // region: ['广东省', '广州市', '海珠区']
      },
    };
  },

  onLoad() {},

  methods: {
    /**
     * 绑定
     */
    async bind() {
      if (!this.bank.bankname || !this.bank.bankname.length)
        return this.$toast("请输入开户行名称", "error");

      if (!this.bank.depositName || !this.bank.depositName.length)
        return this.$toast("请输入开户名称", "error");

      if (!this.bank.bankAccount || !this.bank.bankAccount.length)
        return this.$toast("请输入银行卡号", "error");

      if (!this.bank.confirmBankAccount || !this.bank.confirmBankAccount.length)
        return this.$toast("请确认银行卡号", "error");

      if (this.bank.bankAccount !== this.bank.confirmBankAccount)
        return this.$toast("银行卡号不一致", "error");

      let { code, data, message } = await bankAuth(this.bank);
      if (code === 200) this.$toast("绑定成功", "success");
    },

    /**
     * 选择区域
     */
    bindRegionChange(e) {
      this.bank.region = e.detail.value;
    },
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  .uni-input {
    margin-bottom: 0;
    border: none;
  }
}
</style>
